<template>
  <div :class="tabBarStyle">
    <div
      v-for="{ label, value } in tabs"
      :class="activeTab == value ? activeStyle : tabStyle"
      @click="$emit('clickTab', value)"
    >
      {{ label }}
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  tabs: LabelValuePair[];
}>();
defineEmits<{
  clickTab: [key: string | number];
}>();
const activeTab = defineModel<string | number>();
const { isDarkMode } = useTheme();
const tabStyle =
  "flex items-center justify-center w-[120px] h-9 rounded-[18px] cursor-pointer select-none";
const activeStyle = tabStyle + " bg-primary text-[#fff]";
const tabBarStyle = computed(() => {
  const base = "flex h-11 p-1 rounded-[22px] ";
  if (isDarkMode.value) return base + "bg-[#343435]";
  else return base + `bg-[#E6EDF5]`;
});
</script>

<style scoped></style>
